<template>
    <div>
        <a-modal
         v-model:visible="visible"
         title="其他支部党日活动学习"
         @ok="handleOk"
         @cancel="visible = false"
         :maskClosable="false"
         class="study-add-edit-modal"
         width="80%"
         :footer="null"
        >
            <div v-if="visible">
                <a-tabs type="card">
                    <a-tab-pane key="study-3" tab="活动内容">
                        <a-form layout="horizontal" class="add-edit-form">
                            <a-form-item label="标题">
                                <span >{{ formState.fbt }}</span>
                            </a-form-item>
                            <a-form-item label="会议主题">
                                <span >{{ formState.fhyzt }}</span>
                            </a-form-item>
                            <a-form-item label="摘要">
                                <span >{{ formState.fzy }}</span>
                            </a-form-item>
                            <a-form-item label="报道链接">
                                <a :href="formState.fbdlj" target="_blank">{{ formState.fbdlj }}</a>
                            </a-form-item>
                            <a-form-item label="所属党支部">
                                <span >{{ formState.fssdzb }}</span>
                            </a-form-item>
                            <a-form-item label="活动来源">
                                <span >{{ formState.fzyly }}</span>
                            </a-form-item>
                            <a-form-item label="活动时间">
                                <span >{{ formState.ffbsj }}</span>
                            </a-form-item>
                            <a-form-item label="完成时间">
                                <span >{{ formState.fwcsj }}</span>
                            </a-form-item>
                            <a-form-item label="通知内容" class="flex-1-box">
                                <div v-html="formState.ftznr"></div>
                            </a-form-item>
                        </a-form>
                    </a-tab-pane>
                    <a-tab-pane key="study-4" tab="活动资料">
                        <a-form-item label="相关附件" class="flex-1-box">
                            <a-tabs type="card" @change="callback">
                                <a-tab-pane v-for="(item,index) in tabList" :key="item.key" :tab="item.tabName">
                                </a-tab-pane>
                                <a-list
                                    class="demo-loadmore-list"
                                    :loading="loading"
                                    item-layout="horizontal"
                                    :data-source="fjxxList"
                                >
                                    <a-list-item slot="renderItem" slot-scope="item, index">
                                        <a slot="actions" @click="viewClick(item)">查看</a>
                                        <a slot="actions" @click="downloadClick(item)">下载</a>
                                        <a-list-item-meta
                                            :description="item.fwjxsmc + item.fwjlx"
                                        >
                                        </a-list-item-meta>
                                    </a-list-item>
                                </a-list>
                            </a-tabs>
                        </a-form-item>
                    </a-tab-pane>
                </a-tabs>
            </div>
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">关闭</a-button>
            </div>
        </a-modal>
        <playDialog ref="playDialogRef"/>
    </div>
</template>
<script>
import {
    partyXxzlqueryXxzlFjList,
    partyXxzldownFile,
 } from './service/index'
import YchConstant from "@/api/YchConstant";
import blobType from '@/common/blobType'
import playDialog from './playDialog'
export default {
    components:{
        playDialog
    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            uploadLoading:false,
            fjxxList:[],
            tabList: [
                {key: '1',tabName: 'pdf',type: 'pdf',listName: 'pdfList'},
                {key: '2',tabName: '视频',type: 'mp4',listName: 'videoList'},
                {key: '3',tabName: '音频',type: 'mp3',listName: 'mp3List'},
                {key: '4',tabName: 'ppt',type: 'ppt/pptx',listName: 'pptList'},
            ],
            fileType: {},

            loading: true,
            loadingMore: false,
            showLoadingMore: true,
            data: [],
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            //console.log(val)
            this.formState = {}
            this.formState = val
            this.fjxxList = []
            if(val.id){
                this.getFile(val)
            }
            this.fileType = {}
            this.fileType = this.tabList[0]
        },
        callback(val){
            this.fileType = {}
            this.tabList.forEach(item => {
                if(item.key == val){
                    this.fileType = item
                    this.getFile(this.formState)
                }
            })
        },
        getFile(val){
            //console.log(val)
            partyXxzlqueryXxzlFjList({id:val.id}).then(res=>{
                if(res.code == 200){
                    let key = this.fileType.key
                    if(key == '1'){
                        this.fjxxList = res.result.pdfList
                    } else if (key == '2'){
                        this.fjxxList = res.result.videoList
                    }else if (key == '3'){
                        this.fjxxList = res.result.mp3List
                    }else if (key == '4'){
                        this.fjxxList = res.result.pptList
                    }
                    this.loading = false
                    //console.log(this.fjxxList)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        viewClick(val){
            if(this.fileType.key == '1' || this.fileType.key == '4'){
                window.open(
                    bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/partyXxzl/downFile?id='+val.id
                )
            } else if(this.fileType.key == '2' || this.fileType.key == '3'){
                let src = bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/partyXxzl/downFile?id='+val.id
                //console.log(src)
                this.$refs.playDialogRef.getSrc(src)
                this.$refs.playDialogRef.visible = true
            }
            // let url = bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/partyXxzl/queryDjxxTypeFjList'+val.fwjccmc;
            // let filePreviewUrl = bootConfig[process.env.NODE_ENV].locality_ApI
            // url = encodeURIComponent(this.$Base64.encode(url))
            // window.open(filePreviewUrl+"/onlinePreview?url="+url)
        },
        downloadClick(val){
            var that = this
            var fileName = val.fwjxsmc
            let param = {id:val.id}
            partyXxzldownFile(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }else{
                    let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + val.fwjlx)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                    this.$emit('tableSearchEvent')
                }
            })
        },
        handleOk(val){},
    }
}
</script>
<style lang="less">
.study-add-edit-modal{
    img {
        width:100%;
    }
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
        }
        .ant-form-item-label{
            width: 85px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
    .ant-tabs.ant-tabs-card {
        .ant-tabs-tab {
            font-size: 16px;
            height: auto;
        }
        .ant-tabs-bar .ant-tabs-tab-active {
            background: #5ca3e5 !important;
            border-color: #5ca3e5 !important;
            color: #fff;
            font-size: 16px;
        }
    }
}
</style>
